:host {
	position: relative;
}

#side-menu{
	width: 2px;
    float: right;
    position: absolute;
    right: 176px;
    z-index: 2;
}

.mat-icon-button {
	padding: 0 !important;
	min-width: 0 !important;
	width: 40px !important;
	height: 40px !important;
	flex-shrink: 0;
	line-height: 40px;
	border-radius: 50%;
	position: relative !important;
	left: 115px !important;
}
@media only screen and (max-width: 576px) {
    .box{
		right:-14em !important;
		padding: 10px !important;
	}
	div.outer-wrapper service-box{
		margin-left: 47% !important;

	}
	button.mat-icon-button {
		left:11.2em !important;
	}
}
.box {
	border: 1px solid #ccc;
	box-shadow: 0 2px 10px rgba(0,0,0,.2);
	padding: 30px;
	position: absolute;
	right: -153px;
	top: 44px;
	z-index: 1;
	background: white;
	visibility: hidden;

	&.opened {
		visibility: visible;
	}

	.tip {
		position: absolute;
		top: -10px;
		right: 12px;

		.border {
			width: 0;
			height: 0;
			position: absolute;
			right: 0;
			top: -1px;
			border-left: 7px solid transparent;
			border-right: 7px solid transparent;
			border-bottom: 11px solid rgba(0,0,0,0.4);
		}

		.foreground {
			width: 0;
			height: 0;
			position: absolute;
			top: 0;
			right: 0;
			border-left: 7px solid transparent;
			border-right: 7px solid transparent;
			border-bottom: 10px solid white;
		}
	}

	.services {
		display: flex;
		flex-direction: column;

		.row  {
			display: flex;

			a {
				text-decoration: none;
				color: inherit;

				.col {
					width: 84px;
					height: 84px;
					margin: 8px 2px;
					border: 1px solid transparent;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;

					&:hover {
						border: 1px solid #ddd;
					}

					.img {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
					}

					span {
						text-align: center;
					}
				}
			}
		}
	}
}
